<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="/js/jquery-3.4.1.min.js" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script src="/js/main.js" th:src="@{/js/main.js}"></script>
    <script src="/js/bootstrap.bundle.js" th:src="@{/js/bootstrap.bundle.js}"></script>
    <script src="/js/bootstrap.bundle.min.js" th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script src="/js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
    <script src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <link href="/css/font-awesome.css" th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link href="/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link href="/css/bootstrap-grid.css" th:href="@{/css/bootstrap-grid.css}" rel="stylesheet">
    <link href="/css/bootstrap-grid.min.css" th:href="@{/css/bootstrap-grid.min.css}" rel="stylesheet">
    <link href="/css/bootstrap-reboot.css" th:href="@{/css/bootstrap-reboot.css}" rel="stylesheet">
    <link href="/css/bootstrap-reboot.min.css" th:href="@{/css/bootstrap-reboot.min.css}" rel="stylesheet">
    <link href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body style="background: #effae7">
<div>
    <table class="navbar navbar-expand-sm bg-dark navbar-dark" style="background-color:#343a40">
        <tr></tr>
        <tr class="navbar-nav">
            <td class="nav-item active display-4 text-white">
                投票后台管理系统
            </td>
        </tr>
    </table>
</div>


<br/>
<!--第一部分投票-->
<div style="padding: 0 200px;">
    <!--    <h2 style="text-align:left; margin-bottom: 20px">投票管理</h2>-->
    <table border="1" class="table table-striped table-bordered table-hover" style="border-radius: 10px;font-size: 14px">
        <thead class="thead-dark">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>选项1</td>
            <td>票数</td>
            <td>选项2</td>
            <td>票数</td>
            <td>选项3</td>
            <td>票数</td>
            <td>选项4</td>
            <td>票数</td>
            <td>选项5</td>
            <td>票数</td>
            <td>选项6</td>
            <td>票数</td>
            <td>选项7</td>
            <td>票数</td>
            <td>日期</td>
            <td>发起人</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr th:each="vote : ${votes}" class="table-active">
            <td th:text="${vote.vid}"></td>
            <td th:text="${vote.title}"></td>
            <td th:text="${vote.option}"></td>
            <td th:text="${vote.countoption}"></td>
            <td th:text="${vote.option2}"></td>
            <td th:text="${vote.countoption2}"></td>
            <div th:if="${vote.option3}">
                <td th:text="${vote.option3}"></td>
                <td th:text="${vote.countoption3}"></td>
            </div>
            <div th:unless="${vote.option3}" eq null>
                <td>&nbsp</td>
                <td>&nbsp</td>
            </div>
            <div th:if="${vote.option4}">
                <td th:text="${vote.option4}"></td>
                <td th:text="${vote.countoption4}"></td>
            </div>
            <div th:unless="${vote.option4}">
                <td>&nbsp</td>
                <td>&nbsp</td>
            </div>
            <div th:if="${vote.option5}">
                <td th:text="${vote.option5}"></td>
                <td th:text="${vote.countoption5}"></td>
            </div>
            <div th:unless="${vote.option5}">
                <td>&nbsp</td>
                <td>&nbsp</td>
            </div>
            <div th:if="${vote.option6}">
                <td th:text="${vote.option6}"></td>
                <td th:text="${vote.countoption6}"></td>
            </div>
            <div th:unless="${vote.option6}">
                <td>&nbsp</td>
                <td>&nbsp</td>
            </div>
            <div th:if="${vote.option7}">
                <td th:text="${vote.option7}"></td>
                <td th:text="${vote.countoption7}"></td>
            </div>
            <div th:unless="${vote.option7}">
                <td>&nbsp</td>
                <td>&nbsp</td>
            </div>
            <td th:text="${vote.date}"></td>
            <td th:text="${vote.author}"></td>
            <td>
                <div>
                    <a onclick="deleteImg(this)" th:id="${vote.vid}" style="text-align:center;"><i
                            class="btn btn-danger">删除</i></a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--第二部分添加投票-->
<div style="margin: 0 200px;border: solid 2px #cdd6c6;border-radius: 10px;padding: 10px 20px;font-size: 14px">
    <form action="/manager/addvote" method="get">
        <h2 style="text-align:left; margin-bottom: 20px">添加投票</h2><br/>
        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">标题</label>
                <div class="col-md-10">
                    <input id="title" name="title" class="form-control" type="text" placeholder="标题" required="true"/>
                </div>
                <div class="col-md-1">
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">选项一</label>
                <div class="col-md-10">
                    <input id="option" name="option" class="form-control" type="text" placeholder="选项一"
                           required="true"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">选项二</label>
                <div class="col-md-10">
                    <input id="option2" name="option2" class="form-control" type="text" placeholder="选项二"
                           required="true"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">选项三</label>
                <div class="col-md-10">
                    <input id="option3" name="option3" class="form-control" type="text" placeholder="选项三"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">选项四</label>
                <div class="col-md-10">
                    <input id="option4" name="option4" class="form-control" type="text" placeholder="选项四"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">选项五</label>
                <div class="col-md-10">
                    <input id="option5" name="option5" class="form-control" type="text" placeholder="选项五"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">选项六</label>
                <div class="col-md-10">
                    <input id="option6" name="option6" class="form-control" type="text" placeholder="选项六"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">选项七</label>
                <div class="col-md-10">
                    <input id="option7" name="option7" class="form-control" type="text" placeholder="选项七"/>
                </div>
            </div>
        </div>
        <div class="row" style="margin: 40px auto;">
            <div class="col-md-4" style="margin: 0 auto">
                <button class="btn btn-primary btn-block" type="reset">重置</button>
            </div>
            <div class="col-md-4" style="margin-right: 120px">
                <button class="btn btn-primary btn-block" type="submit" style="margin-right: 120px">提交</button>
            </div>
        </div>

    </form>
</div>
<!--第三部分注册-->
<div style="margin: 10px 200px;border: solid 2px #cdd6c6;border-radius: 10px;padding: 10px 20px;font-size: 14px">

    <h2 style="text-align:left; margin-bottom: 40px">用户注册</h2>
    <form action="/manager/register" method="get">
        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">输入用户名</label>
                <div class="col-md-10">
                    <input id="username" name="username" class="form-control" type="text" placeholder="用户名"
                           required="true"/>
                </div>
                <div class="col-md-1">
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <label class="form-label col-md-1" style="margin: 6px 20px">输入密码</label>
                <div class="col-md-10">
                    <input id="password" name="password" class="form-control" type="text" placeholder="密码"
                           required="true"/>
                </div>
            </div>
        </div>

        <div class="row" style="margin: 40px auto; ">
            <div class="col-md-4" style="margin: 0 auto">
                <button class="btn btn-primary btn-block" type="reset">重置</button>
            </div>
            <div class="col-md-4" style="margin-right: 120px">
                <button class="btn btn-primary btn-block" type="submit" style="margin-right: 120px">注册</button>
            </div>
        </div>

    </form>
</div>

</body>

</html>
<script>
    function deleteImg(obj) {
        console.log(obj.id)
        $.ajax({
            url: "/manager/delete/" + obj.id,
            type: 'delete',
            success: function (result) {
                console.log("删除成功!");
                location.replace("/list")
            },
            error: function () {
                console.log("删除失败!");
                location.replace("/list")
            }

        });
    }
</script>